<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="负责人查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button type="primary" @click="handleEdit()" icon="el-icon-plus">新增</el-button>
      </el-form-item>

      <div class="text-muted" v-loading="countLoading">
        <div>合计：</div>
        退费项目数：
        <span class="text-danger">{{ totalCount || '-' }}</span>
        ，退费条数：
        <span class="text-danger">{{ countData.p || '-' }}</span>
        ，退费金额：
        <span class="text-danger">{{ countData.p1 || '-' }} 万元</span>
      </div>
    </el-form>

    <c-table border v-loading="loading" :stripe="false" :columns="tableColumns" :data="tableData">
      <template v-slot:refundStatus="scope">
        <div :class="`text-${scope.row.refundStatusStyle}`">
          <div>{{ scope.row.refundStatus }}</div>
          <small v-if="scope.row.refund_status > 0">{{ scope.row.refundTime }}</small>
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <edit-dialog :visible.sync="editVisible" :table-id="tableId" @success="getData()"></edit-dialog>

    <list-dialog :visible.sync="viewVisible" :query-id="queryId" @success="getData()"></list-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import SelectAddress from '@/components/select/SelectAddress'
import editDialog from '@/bigcredit/views/settle/refund/components/MainDialog'
import ListDialog from '@/bigcredit/views/settle/refund/ListDialog'

export default {
  components: {
    SelectAddress,
    editDialog,
    ListDialog,
  },
  props: {},
  data() {
    return {
      refundStatusSelected: '',
      params: {
        index: 1,
        size: 15,
        customer_name: '',
        corp_name: '',
        address_code: '',
      },
      order: {
        create_time: 'desc',
      },
      loading: false,
      tableName: 'credit_warrant_fee_refund_view',
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: 120 },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address', minWidth: 120 }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center', minWidth: 100 } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: 120 } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },
        { attrs: { label: '担保费率(%)', prop: 'gua_fee_rate', align: 'center' } },
        {
          attrs: {
            label: '缴费金额(万元)',
            prop: 'actual_warrant_fee',
            align: 'center',
            minWidth: 100,
          },
        },
        { attrs: { label: '退费条数', prop: 'approval_count_finish', align: 'center' } },
        { attrs: { label: '退费金额(万元)', prop: 'refund_funds', align: 'center' } },
        {
          attrs: {
            label: '待处理条数',
            prop: 'approval_count',
            align: 'center',
            process: v => +(v || '') || '-',
          },
        },
        {
          attrs: { label: '操作', align: 'center', minWidth: 130 },
          operations: [
            {
              content: '退费列表',
              icon: 'fa fa-rmb',
              event: this.handleView,
            },
          ],
        },
      ],
      tableData: [],
      totalCount: 0,

      editVisible: false,
      tableId: '',

      viewVisible: false,
      queryId: '',

      countLoading: false,
      countData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'user', 'job']),
    isUserCity() {
      return this.user.orgRegionLever < 3
    },
    isUserProvince() {
      return this.user.orgRegionLever === 1
    },
    // 账务部
    isUserAccount() {
      return ['org_f_manage', 'org_f_emp'].includes(this.job)
    },
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    getCounctData() {
      const { index, size, ...params } = this.params
      this.countLoading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            ...params,
            groupFunc: 'round(sum(approval_count_finish)|0),round(sum(refund_funds)|2)',
          },
          { create_time: 'desc' }
        )
        .then(res => {
          this.countData = res?.data?.[0] ?? {}
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.getCounctData()
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params, this.order)
      )
      this.loading = false

      const data = (res && res.data) || {}
      this.totalCount = data.totalCount || 0
      this.tableData = (data.data || []).map(this.dataAdapter)
    },
    dataAdapter(item) {
      item.refund_status = +item.refund_status
      item.applyRefundTime = this.$utils.dateFormat(item.apply_refund_time, 'yyyy-MM-dd')
      item.refundTime = this.$utils.dateFormat(item.refund_time, 'yyyy-MM-dd')

      return item
    },
    handleRefundStatusChange() {
      if (!this.refundStatusSelected) {
        this.params['refund_status.gte'] = 0
        this.params['refund_status.eq'] = ''
      } else {
        this.params['refund_status.gte'] = ''
        this.params['refund_status.eq'] = this.refundStatusSelected
      }
      this.getData()
    },
    handleEdit() {
      this.editVisible = true
    },
    handleView(row = {}) {
      this.queryId = row.customer_related_id || ''
      this.viewVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
